<%@ page language="java" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page pageEncoding="utf-8"%>
<jsp:directive.include file="/WEB-INF/views/admin/include/taglibs.jsp"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<script type="text/javascript">
$(document).ready(function($){
	
	// live() removed: 1.9 remove function 
	$('#divResult a').on('click', function(e){
		getSubList($(this).attr('id'));
		e.preventDefault();
	});
	
});

function getSubList(categoryUpNo){
	
	var data = JSON.stringify({'boardNo':$('#boardNo').val(), 'categoryUpNo' : categoryUpNo});
	//alert(data);
	$.ajax({
		contentType : 'application/json; charset=utf-8', type : 'post', dataType : 'json', async : false
		, url  : '<c:url value="/admin/board/category/sub/list" />'
		, data : data
		, success : function(json){
			$('#' + categoryUpNo).next('ul').remove();
			$('<ul></ul>').append($('#code-tmpl').tmpl(json)).appendTo($('#'+categoryUpNo).parent());
	      }
	});
	
}
</script>
<script type="text/x-jquery-tmpl" id="code-tmpl" >
	<li><a id="\${categoryNo }">\${categoryName}</a></li>
</script>
<style type="text/css">
	#divResult ul {list-style: none;display: list-item;}
	#divResult li {}
</style>
</head>
<body>
	<input type="hidden" id="boardNo" value="1" />
	<div id="divResult">
		<ul>
			<c:if test="${not empty categoryList}">
				<c:forEach items="${categoryList }" var="row" varStatus="status">
					<li><a id="${row.categoryNo}">${row.categoryName}</a></li>
				</c:forEach>
			</c:if>
		</ul>
	</div>
</body>
</html>